<template>
  <div>
    <div class="content" v-if="headerAdd">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="首页广告编码">
          <el-input
            v-model="queryParams.homeId"
            clearable
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="btnAdd">新增</el-button>
        <el-button type="primary" plain @click="getList">查询</el-button>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="homeId"
          label="首页广告编码"
          :align="'center'"
          width="100"
        ></el-table-column>
        <el-table-column prop="homeIcon" label="首页广告图片" :align="'center'">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 52px; height: 52px"
                :src="scope.row.homeIcon"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[scope.row.homeIcon]"
                fit="cover"
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="homeLink"
          label="首页广告链接"
          :align="'center'"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDel(scope.row.homeId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="headerAdd">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <add
      v-if="addShow"
      :objData="objData"
      :isEdit="isEdit"
      @handleCancle="handleCancle"
    ></add>
    <detail
      v-if="viewShow"
      :objData="objData"
      @handleCancle="handleCancle"
    ></detail>
  </div>
</template>
<script>
import add from "./component/add";
import detail from "./component/detail";
import { list, del } from "@/api/sygg/home";
export default {
  name: "fukuang",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: "",
        homeId: "",
      },
      headerAdd: true,
      addShow: false,
      viewShow: false,
      loading: false,
      isEdit: false,
      tableData: [],
      total: 0,
    };
  },
  components: {
    add,
    detail,
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleCancle() {
      this.addShow = false;
      this.headerAdd = true;
      this.viewShow = false;
      this.isEdit = false;
      this.getList();
    },
    // 新增
    btnAdd() {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = false;
    },
    // 编辑
    handleEdit(row) {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = true;
      this.objData = row;
    },
    // 查看
    handleView(row) {
      this.addShow = false;
      this.viewShow = true;
      this.headerAdd = false;
      this.objData = row;
    },
    // 删除
    handleDel(homeId) {
      this.$confirm("确定要删除该条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del({ homeId }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 查询列表
    getList() {
      this.loading = true;
      list(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = +response.total;
        this.loading = false;
      });
    },
    handleCurrentChange(e) {
      this.queryParams.pageNum = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e;
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}
.demo-image__preview {
  cursor: pointer;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.footer {
  display: flex;
  justify-content: end;
  padding-right: 40px;
  padding-top: 23px;
}
</style>
